<template>
	<div class="header">
		<div class="header-left">
			<!-- iconfont类加载图标 -->
			<span class="iconfont">&#xe624;</span>
		</div>
		<div class="header-input">
			<span class="iconfont reseach-icon">&#xe632;</span>
			输入城市/景点/游玩主题
		</div>
		<!-- 点击跳转到city组件 -->
		<router-link to="/city">
			<div class="header-right">
				{{this.$store.state.city}}
				<span class="iconfont arrow-icon">&#xe64a;</span>
			</div>
			
		</router-link>
		
	</div>
</template>

<script>
export default {
  name: 'HomeHeader',
  // props:{
	 //  city:String
  // },
}
</script>
<!-- scoped代表只对当前组件样式生效 -->
<!-- npm install stylus __save -->
<!-- npm install stylusloader __save-->
<style lang="stylus" scoped>
	// 引入全局变量 style在build中webpack.base.conf.js已经配置了路径
	@import "~style/varibles.styl"
	@import "~style/mixmin.styl"
	.header
		display:flex
		color:white
		width:100%
		line-height:.86rem
		background:$bgcolor    //使用全局变量中的定义的变量
		padding-left:0.15rem
		padding-right:0.15rem
		.header-left:
			width:.64rem
			float:left
		.header-input
			padding-left:0.2rem   //调整左侧的图标
			flex:1
			margin-top: .12rem
			margin-bottom: .12rem;
			margin-left: .25rem;
			margin-right: .1rem;
			height:.64rem
			line-height:.62rem
			background:#fff
			border-radius: .2rem
			color:#ccc
			.reseach-icon
				text-align:center
		.header-right
			min-width:5%
			padding:0 0.3rem
			text-align:center
			color:white
			ellipsis()
			.arrow-icon
				font-size:0.2rem

</style>